<template>
  <scroll class="suggest"
  :data="result"
  @scrollToEnd="searchMore"
  :pullUp="pullUp"
  :beforeScroll="beforeScroll"
  ref="suggest"
  @beforeScroll="listScroll"
  >
    <ul class="suggest-list">
      <li class="suggest-item" v-for="item of result" :key="item.id"
      @click="selecteItem(item)"
      >
        <div class="icon">
          <i :class="getIconCls(item)"></i>
        </div>
        <div class="name">
          <p class="text" v-html="getDisplayName(item)"></p>
        </div>
      </li>
      <loading v-show="hasMore"></loading>
    </ul>
    <div class="no-result-wrapper" v-show="!hasMore && !result.length">
      <no-result title="抱歉,暂无搜索结果"></no-result>
    </div>
  </scroll>
</template>
<script>
import {search} from 'api/search'
import {ERR_OK} from 'api/config'
import {createSong} from 'common/js/songs'
import Scroll from 'base/scroll/scroll'
import Loading from 'base/loading/loading'
import Singer from 'common/js/singer'
import NoResult from 'base/no-result/no-result'
import {mapMutations, mapActions} from 'vuex'
const perpage = 20
const TYPE_SINGER = 'singer'
export default {
  name: 'Suggest',
  props: {
    query: {
      type: String,
      default: ''
    },
    showSinger: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      page: 1,
      result: [],
      hasMore: true,
      pullUp: true,
      beforeScroll: true
    }
  },
  methods: {
    refresh () {
      this.$refs.suggest.refresh()
    },
    listScroll () {
      this.$emit('listScroll')
    },
    selecteItem (item) {
      if (item.type === TYPE_SINGER) {
        let singer = new Singer({name: item.singername, id: item.singermid})
        this.$router.push(`/search/${singer.id}`)
        this.setSinger(singer)
      } else {
        this.insertSong(item)
      }
      this.$emit('select')
    },
    searchMore () {
      if (!this.hasMore) return
      this.page++
      search(this.query, this.page, false, perpage)
        .then((res) => {
          if (res.code === ERR_OK) {
            this.result = this.result.concat(this._genResult(res.data))
            this._checkMore(res.data)
          }
        })
    },
    getDisplayName (item) {
      if (item.type === TYPE_SINGER) {
        return item.singername
      } else {
        return `${item.name}-${item.singer}`
      }
    },
    getIconCls (item) {
      if (item.type === TYPE_SINGER) {
        return 'icon-mine'
      } else {
        return 'icon-music'
      }
    },
    _search (newQuery) {
      this.page = 1
      this.hasMore = true
      this.$refs.suggest.scrollTo(0, 0)
      search(newQuery, this.page, this.showSinger, perpage)
        .then((res) => {
          if (res.code === ERR_OK) {
            this.result = this._genResult(res.data)
            this._checkMore(res.data)
            // console.log(res.data)
          }
        })
    },
    _checkMore (data) {
      let song = data.song
      if (!song.list || perpage * song.curpage + song.curnum >= song.totalnum) {
        this.hasMore = false
      }
    },
    _genResult (data) {
      let ret = []
      if (data.zhida && data.zhida.singerid) {
        ret.push({...data.zhida, ...{type: TYPE_SINGER}})
      }
      if (data.song) {
        ret = ret.concat(this._normalizeSongs(data.song.list))
      }
      return ret
    },
    _normalizeSongs (list) {
      let ret = []
      list.forEach((musicData) => {
        if (musicData.songid && musicData.albummid) {
          ret.push(createSong(musicData))
        }
      })
      return ret
    },
    ...mapMutations({setSinger: 'SET_SINGER'}),
    ...mapActions(['insertSong'])
  },
  watch: {
    query (newQuery) {
      this._search(newQuery)
    }
  },
  components: {
    Scroll,
    Loading,
    NoResult
  }
}
</script>
<style lang="scss" scoped>
@import 'common/scss/variable.scss';
@import 'common/scss/mixin.scss';
.suggest{
  height: 100%;
  overflow: hidden;
  .suggest-list{
    padding: 0 0.6rem;
    .suggest-item{
      display: flex;
      align-items: center;
      padding-bottom: 0.2rem;
      height: 0.8rem;
      .icon{
        width: 0.6rem;
        text-align: center;
        margin-right: 0.2rem;
        [class^="icon-"]{
          font-size: 0.28rem;
          color: $color-text-d;
          vertical-align: middle ;
          position: relative;
          top: -0.1rem;
        }
      }
      .name{
        flex: 1;
        font-size: $font-size-medium;
        color: $color-text-d;
        overflow: hidden;
        .text{
          @include ellipse();
          line-height: 0.8rem;
        }
      }
    }
  }
  .no-result-wrapper{
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
